<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>爵位购买</title>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="__CSS__/public.min.css">
</head>
<body ontouchstart>
<div class="page bg--white page--peerage">
    <div class="header">
        <div class="header__hd"><a class="iconfont mb-mobile-back"></a></div>
        <h1 class="header__title">爵位购买<span class="header__subtitle"></span></h1>
    </div>
    <div class="page__bd">
        <div class="cells">
            <div class="cells__title"><b class="f16">爵位特权</b> <span class="f12 text-gray">享有爵位特权专属头像</span></div>
            {foreach name="$list" item="vo"}
            <div class="cell" data-id="{$vo.id}" data-points="{$vo.points}" data-price="{$vo.price}">
                <div class="cell__hd">
                    <div class="cell__avatar"><img src="{$vo.img_src}" alt=""></div>
                </div>
                <div class="cell__bd">
                    <div class="cell__title">{$vo.name}<span class="text-point">￥{$vo.price}/天</span></div>
                </div>
                <div class="cell__ft">
                    <div class="input-number">
                        <span class="input-number__decrease">
                            <span class="iconfont decrease"></span>
                        </span>
                        <span class="input-number__increase">
                            <span class="iconfont increase"></span>
                        </span>
                        <input class="input number" type="text" value="1" readonly unselectable="on"/>
                    </div>
                    <div class="cell__tips f12 mt2">赠送{$vo.points}G币</div>
                </div>
            </div>
            {/foreach}
        </div>
        <div class="form__opr-area">
            <div class="btn btn_info btn_block"></div>
        </div>
    </div>
</div>
<script src="__JS__/jquery.min.js"></script>
<script src="__JS__/common.js?v={$Think.config.commonJs}"></script>
<script>
    $(".cell").click(function () {
        $(".cell").removeClass('active');
        $(this).addClass('active');

        update();
    });

    $(".cell").eq(0).click();

    $(".btn_block").click(function () {
        var cell = $(".cell.active");
        var num = cell.find('.input').val();

        //生成支付订单
        $.ajax({
            url: '/create_nobility_order',
            type: "POST",
            dataType: "json",
            data: {id: cell.data('id'), num: num},
            success: function (res) {
                if (res.code == 200) {
                    var json = JSON.stringify(res.data);
                    console.log(json);
                    window.android._app_pay(json, 'wxpay');
                } else {
                    showMsg(res.msg);
                }
            }
        });
    });

    function InputNumber() {
        $(".input-number__increase").click(function () {
            var $wrap = $(this).parent();
            var $downDom = $wrap.find('.input');

            var value = parseInt($downDom.val()) || 0;
            value++;

            $downDom.val(value);

            update();
        });

        $(".input-number__decrease").click(function () {
            var $wrap = $(this).parent();
            var $downDom = $wrap.find('.input');

            var value = parseInt($downDom.val()) || 0;
            value--;
            if (value <= 0) {
                value = 1;
            }

            $downDom.val(value);

            update();
        })
    }

    function update() {
        var cell = $(".cell.active");
        var i = cell.index() - 1;
        var value = $(".input").eq(i).val();

        var price = cell.data('price') * value;
        var points = cell.data('points') * value;

        $(".btn_block").html("支付 " + price + " 元，赠送 " + points + " G币");
    }

    InputNumber();
</script>
</body>
</html>